<style>
    #temp_pass_edit_frame {
        position: relative;
        text-align: center;
        height: 550px;
        padding: 10px;
    }
    #temp_pass_edit_frame table {
        width: 100%;
    }
    #temp_pass_edit_frame table th, #temp_pass_edit_frame table td {
        padding: 8px;
        border: 1px solid #999;
        text-align: center;
    }
    #temp_pass_edit_frame #console {
        background-color: #eee;
        overflow-y: scroll;
        height: 230px;
    }
    #temp_pass_edit_frame #button-frame {
        position: absolute;
        width: 100%;
        right: 0;
        bottom: 0px;
    }
    #temp_pass_edit_frame #button-frame button {
        float: right;
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        padding: 8px 12px;
        border-radius: 2px;
        transition: all ease .2s;
    }
    #temp_pass_edit_frame #button-frame button:hover {
        background-color: #eeeeee;
        border-color: #cccccc;
        box-shadow: 0 2px 3px #cccccc;
    }
    #temp_pass_edit_frame #button-frame button:active {
        box-shadow: 0 2px 3px #cccccc inset;
    }
</style>
<article id="temp_pass_edit_frame">
    <p style="text-align: left">设备信息</p>
    <table>
        <tr>
            <th style="width: 33%;">设备</th>
            <th style="width: 33%;">状态</th>
            <th style="width: 33%;">操作</th>
        </tr>
        <tr>
            <td style="width: 33%;"><input id="device" type="text"></td>
            <td style="width: 33%;"><span id="device_status">未连接</span></td>
            <td style="width: 33%"><a data-bind="click:check_device" style="padding: 4px; text-decoration: none;" class="next-step">连接设备</a></td>
        </tr>
    </table>
    <br>
    <p style="text-align: left">开卡信息</p>
    <table>
        <tr>
            <th>临时卡类型</th>
            <td><input type="text" id="trafficPermitType" data-bind="value:crTrafficPermitType" /></td>
            <th>状态</th>
            <td><input type="text" id="trafficStatus" data-bind="value:trafficPermitStatus"></td>
        </tr>
        <tr>
            <th>生效时间</th>
            <td><input type="text" id="beginTime" required validationMessage="发行时间必填且只能为标准格式"
                       pattern="^\d{4}(-|\/|.)\d{1,2}\1\d{1,2}$" data-bind="value:beginTime" /></td>
            <th>截止时间</th>
            <td><input type="text" id="endTime" required validationMessage="截止时间必填且只能为标准格式"
                       pattern="^\d{4}(-|\/|.)\d{1,2}\1\d{1,2}$" data-bind="value:endTime" /></td>
        </tr>
    </table>
    <h1 style="font-size: 24px;margin: 15px auto 5px auto">请将IC卡放置在设备上</h1>
    <div id="console" style="text-align: left"></div>
    <div id="button-frame">
        <button data-bind="click:cancel">关闭</button>
    </div>
</article>
<script>
    var tempPassEdit = new TempPassEdit($('#temp_pass_edit_frame'));
</script>